﻿<common:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="XnReader.WinRT.Forms.ChapterIndex"
    DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:common="using:XnReader.WinRT.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controlx="using:XnReader.WinRT.Controlx" xmlns:Helper="using:XnReader.WinRT.Helper" mc:Ignorable="d">
    <Page.Resources>
        <Helper:ReadBackgroundConverter x:Key="ConverterReadBackground"/>
        <Helper:FontFamilyConverter x:Key="ConverterFontFamily"/>
        <Helper:FontColorConverter x:Key="ConverterFontColor"/>
    </Page.Resources>
    <common:LayoutAwarePage.BottomAppBar>
        <AppBar x:Name="footerBar" Height="90" Background="#E5040404">
            <Controlx:CommandDx x:Name="footer"></Controlx:CommandDx>
        </AppBar>
    </common:LayoutAwarePage.BottomAppBar>
    <common:LayoutAwarePage.TopAppBar>
        <AppBar x:Name="headerBar" Height="90" Background="#E5040404">
            <Controlx:CommandDx x:Name="header"></Controlx:CommandDx>
        </AppBar>
    </common:LayoutAwarePage.TopAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid DataContext="{Binding setting}">
        <Grid.Background>
            <ImageBrush x:Name="ibBackground" ImageSource="{Binding Background, Converter={StaticResource ConverterReadBackground}}"/>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="90"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <!--<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>-->
        </Grid>
        <ProgressRing Width="80" Height="80" x:Name="pbLoading" Grid.RowSpan="3" IsActive="True"></ProgressRing>
        <Grid Grid.Row="0" Margin="60,0" >
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <TextBlock FontSize="22" Foreground="#E5898484" Text="《" />
                <!--<TextBlock FontSize="22" Foreground="#E5898484" Text="{Binding articlename}" />-->
                <TextBlock x:Name="txtArticleName" FontSize="22" Foreground="#E5898484" />
                <TextBlock FontSize="22" Foreground="#E5898484" Text="》" />
            </StackPanel>
        </Grid>
        <Grid Grid.Row="1">
            <WebView Visibility="Collapsed" x:Name="wvContent"></WebView>
            <RichTextBlock x:Name="rtxtView" 
                    IsTextSelectionEnabled="False" 
                    Grid.Row="1" 
                    Grid.Column="0" 
                    OverflowContentTarget="{Binding ElementName=firstOverflowContainer}" 
                    TextAlignment="Justify" 
                    FontFamily="Microsoft YaHei" 
                    Padding="60,0"
                    IsTapEnabled="True" 
                    PointerPressed="RtxtViewPointerPressed" >
                <Paragraph x:Name="pgrapView" 
                    FontFamily="{Binding FontFamily, Converter={StaticResource ConverterFontFamily}}" 
                    FontSize="{Binding ElementName=sdFontSize,Path=Value,Mode=TwoWay}"
                    Foreground="{Binding FontColor, Converter={StaticResource ConverterFontColor}}" 
                    CharacterSpacing="100" 
                    LineHeight="28" >
                </Paragraph>
            </RichTextBlock>
            <RichTextBlockOverflow Height="1" Width="1" x:Name="firstOverflowContainer" />
        </Grid> 
        <Grid  Grid.Row="2" Margin="60,0" >
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                <TextBlock x:Name="txtHistoryChapter" FontSize="18" Foreground="#E5898484" Margin="0,0,10,0" />
                <TextBlock x:Name="txtHistoryProcess" FontSize="14" Foreground="#E5898484" Margin="0,2,10,0" />
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Center">
                <HyperlinkButton x:Name="hlbLink" Content="原网页" Click="HlbLinkClick"  Foreground="Green" FontSize="12" FontFamily="Microsoft YaHei"></HyperlinkButton>
                <TextBlock x:Name="txtTips" FontSize="12" Foreground="#E5898484" Text="已由搜索引擎转码以便在移动设备上查看" Margin="-10,7,0,0" FontFamily="Microsoft YaHei"></TextBlock>
            </StackPanel>
        </Grid>
        <Popup x:Name="popBackground"  Margin="0" IsLightDismissEnabled="True" Closed="PopSettingClosed" >
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PaneThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border Background="#E5040404" Height="50" Width="240">
                <ListView x:Name="lvBackground" Foreground="White" SelectionMode="None" HorizontalAlignment="Center" ItemClick="ListViewItemClick" IsItemClickEnabled="True">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Margin" Value="0" />
                            <Setter Property="Padding" Value="0" />
                        </Style>
                    </ListView.ItemContainerStyle>
                <ListViewItem >
                        <Image Tag="1" Width="40" Height="40" Source="/Assets/theme/sample1.jpg"></Image>
                </ListViewItem>
                <ListViewItem >
                        <Image Tag="2" Width="40" Height="40" Source="/Assets/theme/sample2.jpg"></Image>
                </ListViewItem>
                    <ListViewItem>
                        <Image  Tag="3" Width="40" Height="40" Source="/Assets/theme/sample3.jpg"></Image>
                </ListViewItem>
                    <ListViewItem >
                        <Image Tag="4" Width="40" Height="40" Source="/Assets/theme/sample4.jpg"></Image>
                </ListViewItem>
                    <ListViewItem >
                        <Image Tag="5" Width="40" Height="40" Source="/Assets/theme/sample5.jpg"></Image>
                </ListViewItem>
                <ListView.ItemsPanel>
                    <ItemsPanelTemplate>
                        <VirtualizingStackPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </ListView.ItemsPanel>
            </ListView>
            </Border>
        </Popup>
        <Popup x:Name="popFontFamily"  Margin="0" IsLightDismissEnabled="True" Closed="PopSettingClosed" >
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PaneThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border Background="#E5040404" Height="200" Width="120">
                <ListView x:Name="lvFontFamily" Foreground="White" SelectionMode="None" HorizontalAlignment="Center" ItemClick="LvFontFamilyItemClick" IsItemClickEnabled="True">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Margin" Value="0" />
                            <Setter Property="Padding" Value="0" />
                        </Style>
                    </ListView.ItemContainerStyle>
                    <ListViewItem >
                        <TextBlock Tag="Microsoft YaHei"  FontFamily="Microsoft YaHei" Text="微软雅黑" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListViewItem >
                        <TextBlock Tag="SimSun"  FontFamily="SimSun" Text="宋体" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListViewItem >
                        <TextBlock Tag="KaiTi" FontFamily="KaiTi" Text="楷体" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListViewItem >
                        <TextBlock Tag="Arial"  FontFamily="Arial" Text="Arial" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
            </Border>
        </Popup>
        <Popup x:Name="popFontSize"  Margin="0" IsLightDismissEnabled="True" Closed="PopSettingClosed" >
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PaneThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border Background="#E5040404" Height="60" Width="240">
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
                    <TextBlock Text="{Binding ElementName=sdFontSize,Path=Value,Mode=TwoWay}" Foreground="White" FontSize="24" Margin="0,10,20,0" ></TextBlock>
                    <Slider x:Name="sdFontSize" Width="150" Maximum="50" Minimum="18" ValueChanged="SdFontSizeValueChanged" />
                </StackPanel>
            </Border>
        </Popup>
        <!--字符编码-->
        <!--<Popup x:Name="popEncoding"  Margin="0" IsLightDismissEnabled="True" Closed="PopSettingClosed" >
            <Popup.ChildTransitions>
                <TransitionCollection>
                    <PaneThemeTransition />
                </TransitionCollection>
            </Popup.ChildTransitions>
            <Border Background="#E5040404" Height="200" Width="120">
                <ListView x:Name="lvEncoding" Foreground="White" SelectionMode="None" HorizontalAlignment="Center" ItemClick="LvEncodingItemClick" IsItemClickEnabled="True">
                    <ListView.ItemContainerStyle>
                        <Style TargetType="ListViewItem">
                            <Setter Property="Margin" Value="0" />
                            <Setter Property="Padding" Value="0" />
                        </Style>
                    </ListView.ItemContainerStyle>
                    <ListViewItem >
                        <TextBlock Tag="gb2312"  Text="gb2312" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListViewItem >
                        <TextBlock Tag="utf-8"  Text="utf-8" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListViewItem >
                        <TextBlock Tag="gbk"  Text="gbk" FontSize="24"></TextBlock>
                    </ListViewItem>
                    <ListView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <VirtualizingStackPanel Orientation="Vertical"/>
                        </ItemsPanelTemplate>
                    </ListView.ItemsPanel>
                </ListView>
            </Border>
        </Popup>-->

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>-->
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>-->
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="footerBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="headerBar" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
